const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

var getHtmlConfig = function (name) {
    return{
        template: './src/view/'+ name +'.html',
        filename: 'view/'+ name +'.html',
        inject: true,
        hash: true,
        chunks: ['common',name],
        minify: {
            collapseWhitespace : false
        }
    }
}
module.exports = {
    entry: {
        'common': ['/Users/wangke/IntegratedProject/ruiling-mypetstore-web-front/src/page/common/index.js'],
        'index' : ['/Users/wangke/IntegratedProject/ruiling-mypetstore-web-front/src/page/index/index.js'],
        'login' : ['/Users/wangke/IntegratedProject/ruiling-mypetstore-web-front/src/page/login/login.js']
    },
    plugins: [
        // new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        port : 8888,
        contentBase : path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    {
                        loader : MiniCssExtractPlugin.loader,
                        options: {
                            publicPath:'../'
                        }
                    },
                    'css-loader'],
            },
            {
                test : /\.(png|svg|jpg|gif)$/,use : ['url-loader?limit=1024&name=images/[name].[ext]']
            }
        ]
    },
    optimization: {
        minimize: false,
        minimizer: [
            new TerserPlugin({
                extractComments:false,//不将注释提取到单独到文件中
            })
        ],
        splitChunks:{
            cacheGroups: {
                commons : {
                    name      : 'util',
                    chunks    : 'all',
                    minChunks : 2,
                    minSize   : 0
                },
            }
        }
    },
    externals: {
        'jquery' : 'window.jQuery'
    }
};